<template>
  <view v-if="goods" class="box">
    <!-- 轮播图开始 -->
    <u-swiper
      :list="list"
      height="750"
      name="pics_big"
      @click="handlePreviewImage"
    ></u-swiper>
    <!-- 轮播图结束 -->

    <!-- 价格开始 -->
    <view class="goods_price">
      <view class="goods_left">￥{{ goods.goods_price }}</view>
      <view class="goods_right"
        ><u-icon name="zhuanfa"></u-icon> &nbsp;&nbsp;
        <u-icon name="star" class="u-margin-left-20"></u-icon
      ></view>
    </view>
    <!-- 价格结束 -->

    <!-- 商品名称开始 -->
    <view class="goods_name u-line-2">{{ goods.goods_name }}</view>
    <!-- 商品名称开结束 -->

    <!-- 间隔槽开始 -->
    <u-gap height="30" bg-color="#f9f9f9"></u-gap>
    <!-- 间隔槽结束 -->

    <!-- 图文详情开始 -->
    <view class="goods_content">
      <view class="text u-margin-bottom-20">图文详情</view>
      <u-parse :html="goods.goods_introduce" :selectable="true"></u-parse>
    </view>
    <!-- 图文详情结束 -->

    <!-- 提交购物车开始 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <navigator
          class="item car"
          open-type="switchTab"
          url="/pages/cart/cart"
        >
          <u-badge
            class="car-num"
            :count="num"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="btnCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 提交购物车结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      //轮播图数组
      list: [],
      //商品
      goods: null,
      // 商品名称
      goodsId: "",
    };
  },
  //页面初始化
  async onLoad({ id = 17927 }) {
    //获取别的页面传过来的id
    // const { id } = option;
    //发送请求
    const res = await this.$u.get("/goods/detail", { goods_id: id });
    //渲染轮播图
    this.list = res.message.pics;
    this.goods = res.message;
    // 把商品ID存起来
    this.goodsId = id;
    console.log("服务器返回来的数据", res);
    console.log("商品信息", this.goods);
  },

  //计算属性
  computed: {
    //购物车勾选的数量
    num() {
      let count = 0;
      this.$store.state.goods.forEach((goods) => {
        if (goods.is_promote) {
          count += goods.count;
        }
      });
      return count;
    },
  },

  // 函数
  methods: {
    // 点击轮播图放大的效果
    // 点击轮播图 放大预览
    handlePreviewImage(index) {
      // console.log("对于柳岩我无动于衷");
      // urls =["图片地址1","图片地址2"]
      const urls = this.list.map((v) => v.pics_big);
      // 获取被点击的图片的路径
      const current = urls[index];
      uni.previewImage({ urls, current });
    },

    //点击加入购物车
    btnCart() {
      //获取到仓库里购物车的数据
      const list = this.$store.state.goods;
      const index = list.findIndex((v) => v.goods_id == this.goodsId);
      // 判断下标是否存在，
      if (index == -1) {
        // 不存在新则添加数组
        list.push({ ...this.goods, count: 1 });
      } else {
        // 存在则数量++
        list[index].count++;
      }
      uni.showToast({
        title: "加入购物车成功",
        icon: "none", // 不写none 默认值 success 打钩
      });
      this.$store.commit("setGoods", list);
    },
  },
};
</script>

<style lang="scss">
.box {
  margin-bottom: 102rpx;
}
.goods_price {
  padding: 15rpx;
  display: flex;
  font-size: 36rpx;
  justify-content: space-between;
  .goods_left {
    color: $themeColor;
  }
  .goods_right {
    color: #a1a1a1;
    font-size: 45rpx;
  }
}
.goods_name {
  font-weight: 700;
  padding: 15rpx;
}
.goods_content {
  padding: 15rpx;
  .text {
    text-align: center;
  }
}
.navigation {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    margin-right: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 20rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>